<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-select v-model="selectOptions.query" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-form-item>
          <el-input :placeholder="selectOptions.query" v-model="selectOptions.keywords" @keyup.enter.native="doSearch"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="doSearch">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="background: #13ce66" v-on:click="_reload">刷新</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="buyerData" style="width: 100%" v-loading="listLoading" element-loading-text="玩命请求中。。。">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline>
            <el-form-item label="收货信息--">
              <span>地址：{{ props.row.express.province }}{{ props.row.express.city }}{{ props.row.express.district }}{{ props.row.express.edit }}；姓名：{{ props.row.express.name }}；手机号：{{ props.row.express.phone }}</span>
            </el-form-item>
            <p>
              <el-form-item label="物流信息--">
                <span v-if="props.row.express.ex_name">供应商：{{ props.row.express.ex_name }}</span>
                <br v-if="props.row.express.ex_name">
                <span v-if="props.row.express.ex_id">运单号：{{ props.row.express.ex_id }}</span>
                <span v-else>暂无</span>
              </el-form-item>
            </p>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="ID" width="70">
      </el-table-column>
      <el-table-column prop="sn" label="sn" width="70">
      </el-table-column>
      <el-table-column label="用户信息" width="200">
        <template slot-scope="scope">
          <div class="people">
            <span class="name">{{ scope.row.nickname }}</span>
            <!--<br >-->
            <span class="name">{{ scope.row.phone }}</span>
          </div>
          <div class="user-avatar" v-if="scope.row.avatar">
            <a :href="scope.row.avatar" target="_blank"><img :src="scope.row.avatar" alt=""></a>
          </div>
          <div class="user-avatar" v-else>
            <img src="../../../static/images/default.png" alt="">
          </div>
        </template>
      </el-table-column>
      <el-table-column label="菜地信息" min-width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.area_name }}{{ scope.row.name }}地块</span>
        </template>
      </el-table-column>
      <el-table-column prop="plant_name" label="当前植物" width="120">
      </el-table-column>
      <el-table-column  label="最后除草时间" width="170" :formatter="lastWeedTime">
      </el-table-column>
      <el-table-column label="最后浇水时间" width="170" :formatter="lastWaterTime">
      </el-table-column>
      <el-table-column  label="最后施肥时间" width="170" :formatter="lastFertTime">
      </el-table-column>
      <el-table-column  label="最后除虫时间" width="170" :formatter="lastBugTime">
      </el-table-column>
      <el-table-column  label="创建时间" width="170" :formatter="createTime">
      </el-table-column>

      <el-table-column label="操作" width="135">
        <template slot-scope="scope">
          <el-button size="small" type="success" @click="editUserBuyAddress(scope.row.express, scope.row.id)">修改地址</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--修改用户地址-->
    <el-dialog title="修改地址" v-model="editUserAdressAlert" :close-on-click-modal="false">
      <el-form :model="editAddressForm" label-width="80px" :rules="editAddressFormRules">
        <el-form-item label="省">
          <el-input v-model="editAddressForm.province" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="市" prop="city">
          <el-input v-model="editAddressForm.city" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="区" prop="district">
          <el-input v-model="editAddressForm.district" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="edit">
          <el-input v-model="editAddressForm.edit" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="editAddressForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="editAddressForm.phone" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio class="radio" v-model="editAddressForm.sex" label="1">男</el-radio>
          <el-radio class="radio" v-model="editAddressForm.sex" label="2">女</el-radio>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editUserAdressAlert = false">取消</el-button>
        <el-button type="primary" @click.native="editUserBuyAddressSubmit" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>

    <!--分页-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        @current-change="currentPageChange"
        :page-size="30"
        layout="prev, pager, next, jumper"
        :total="total" style="float:right;" :current-page="parseInt(selectOptions.page)">
      </el-pagination>
      <span style="float: right;margin-top: 6px;margin-right: 5px">共 {{ total }} 条数据</span>
    </el-col>

  </section>
</template>

<script type="text/ecmascript-6">
  import util from '../../util'
  import NProgress from 'nprogress'
	import { apiTree } from '../../apiTree'
	
  export default {
    name: 'collect',
    data() {
      return {
        buyerData: [],
        total: 0,
        listLoading: false,
        editUserAdressAlert: false,
        options: [
          {value: 'nickname', label: '用户名'},
          {value: 'uid', label: '用户uid'},
          {value: 'phone', label: '手机号'},
          {value: 'sn', label: '期号'},
          {value: 'plant_name', label: '植物名'}
        ],
        selectOptions: {
          page: this.$route.query.page !== undefined ? this.$route.query.page : 1,
          query: this.$route.query.query !== undefined ? this.$route.query.query : '',
          keywords: this.$route.query.keywords !== undefined ? this.$route.query.keywords : ''
        },
        addLoading: false,
        // 编辑用户地址
        editAddressForm: {
          'buyer_id': 0,
          'district': '',
          'phone': '',
          'city': '',
          'edit': '',
          'sex': '',
          'name': '',
          'province': ''
        },
        editAddressFormRules: {
          district: [
            {required: true, message: '区名', trigger: 'blur'}
          ],
          phone: [
            {required: true, message: '手机号', trigger: 'blur'}
          ],
          city: [
            {required: true, message: '市区', trigger: 'blur'}
          ],
          edit: [
            {required: true, message: '地址', trigger: 'blur'}
          ],
          name: [
            {required: true, message: '姓名', trigger: 'blur'}
          ]
        },
      }
    },
    methods: {
      createTime(row) {
        return row.create_time === '0' ? 0 : this.formatTime(row.create_time)
      },
      // 最后除虫时间
      lastBugTime(row) {
        return row.last_bug_time === '0' ? 0 : this.formatTime(row.last_bug_time)
      },
      // 施肥时间
      lastFertTime(row) {
        return row.last_fert_time === '0' ? 0 : this.formatTime(row.last_fert_time)
      },
      // 搜索
      doSearch() {
        if (this.selectOptions.query) {
          this.$router.push({path: this.$route.path, query: this.selectOptions})
        }
      },
      // 浇水时间
      lastWaterTime(row) {
        return row.last_water_time === '0' ? 0 : this.formatTime(row.last_water_time)
      },
      // 除草时间
      lastWeedTime(row) {
        return row.last_weed_time === '0' ? 0 : this.formatTime(row.last_weed_time)
      },
      // 改变时间
      formatTime(_time) {
        return util.formatDate.format(new Date(_time * 1000), 'yyyy-MM-dd hh:mm:ss')
      },
      // 页码
      currentPageChange(val) {
        this.selectOptions.page = val
        this.$router.push({path: this.$route.path, query: this.selectOptions})
      },
      _reload() {
        this.userBuyerList()
      },
      // 修改用户地址
      editUserBuyAddress(express, _id) {
        this.editUserAdressAlert = true;
        this.editAddressForm = {
          'buyer_id': _id,
          'district': express.district,
          'phone': express.phone,
          'city': express.city,
          'edit': express.edit,
          'sex': express.sex.toString(),
          'name': express.name,
          'province': express.province
        }
      },
      // 修改用户地址提交
      editUserBuyAddressSubmit() {
        let _t = util.cloneObj(this.editAddressForm);
        delete _t.buyer_id;
        let param = {'data': _t, id: this.editAddressForm.buyer_id};
        apiTree('buyer/index', 'user/editUserBuyAddress', param, 'POST').then((res) => {
          if (res.s === 1) {
            this.$message({
              message: '提交成功',
              type: 'success'
            });
            this.editUserAdressAlert = false;
            this.userBuyerList();
          } else {
            this.$message.error(res.err_str);
          }
        });
      },
      // 用户购买列表
      userBuyerList() {
        let para = this.$route.query
        if (util.isEmptyObject(para)) {
          this.selectOptions = {
            page: 1,
            query: '',
            keywords: ''
          }
        }
        NProgress.start()
        this.listLoading = true
        apiTree('buyer/index','user/buyer',para).then((res) => {
          this.buyerData = res.d.data
          this.total = res.d.total_num
          this.listLoading = false
          NProgress.done()
        })
      }
    },
    created() {
      this.userBuyerList()
    },
    watch: {
      $route: 'userBuyerList'
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
  .el-table .info-row
    background #c9e5f5
  .el-table .positive-row
    background #e2f0e4
  .user-avatar
    width 60px
    height 60px
    border-radius 50%
    & img
      width 100%
      height 100%
      border-radius 50%
  .cell {
    overflow: hidden;
  }
  .name {
    display: block;
    padding-top: 10px;
    display: block;
    width: 100px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .people {
    float: right;
  }
  .user-avatar {
    float: left;
  }
  .cont {
    padding: 10px;
  }
</style>
